{% extends 'base.html' %}
{% block content %}

    <section class="row row-cols-1" style="background-color: #ffffff">
        <div class="col">
            <table class="col-12 spectrum-Table">
                <thead class="spectrum-Table-head">
                <tr>
                    <th class="spectrum-Table-headCell">Column Title</th>
                    <th class="spectrum-Table-headCell">Column Title</th>
                    <th class="spectrum-Table-headCell">Column Title</th>
                </tr>
                </thead>

                <tbody class="spectrum-Table-body">
                <tr class="spectrum-Table-row">
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
                </tr>
                <tr class="spectrum-Table-row">
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
                </tr>
                <tr class="spectrum-Table-row">
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
                    <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section class="row py-5 px-3" style="background-color: #ffffff">
        <div class="col-12 spectrum-ActionGroup spectrum-ActionGroup--compact">
            <button class="col-4 spectrum-ActionButton spectrum-ActionGroup-item">
                <span class="spectrum-ActionButton-label">Edit</span>
            </button>

            <button class="col-4 spectrum-ActionButton spectrum-ActionGroup-item">
                <span class="spectrum-ActionButton-label">Search</span>
            </button>

            <button class="col-4 spectrum-ActionButton spectrum-ActionGroup-item">
                <span class="spectrum-ActionButton-label">Delete</span>
            </button>
        </div>
    </section>

{% endblock content %}